import React, { useState } from 'react';
import { PhoneIcon, BackspaceIcon, ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/solid';

interface PhoneKeypadProps {
  onKeyPress: (key: string) => void;
  onDelete: () => void;
}

const PhoneKeypad: React.FC<PhoneKeypadProps> = ({ onKeyPress, onDelete }) => {
  const [isExpanded, setIsExpanded] = useState(true);
  
  const keys = [
    ['1', '2', '3'],
    ['4', '5', '6'],
    ['7', '8', '9'],
    ['*', '0', '#']
  ];

  return (
    <div className="flex flex-col items-center py-4">
      {/* Number Pad */}
      {isExpanded && (
        <div className="w-full max-w-[280px] mb-4">
          <div className="grid grid-cols-3 gap-2">
            {keys.map((row, rowIndex) => (
              row.map((key, colIndex) => (
                <button
                  key={`${rowIndex}-${colIndex}`}
                  onClick={() => onKeyPress(key)}
                  className="h-12 bg-gray-100/80 backdrop-blur-sm rounded-lg flex items-center justify-center text-xl font-medium text-gray-800 hover:bg-gray-200 active:bg-gray-300 transition-colors"
                >
                  {key}
                </button>
              ))
            ))}
          </div>
        </div>
      )}

      {/* Control Buttons */}
      <div className="flex items-center justify-center gap-3 w-full max-w-[280px]">
        <button 
          className="flex-1 h-11 bg-green-500 rounded-lg flex items-center justify-center text-white hover:bg-green-600 active:bg-green-700 transition-colors"
        >
          <PhoneIcon className="w-5 h-5" />
        </button>
        <button 
          onClick={onDelete}
          className="w-11 h-11 bg-gray-100/80 backdrop-blur-sm rounded-lg flex items-center justify-center hover:bg-gray-200 active:bg-gray-300 transition-colors"
        >
          <BackspaceIcon className="w-5 h-5 text-gray-700" />
        </button>
        <button 
          onClick={() => setIsExpanded(!isExpanded)}
          className="w-11 h-11 bg-gray-100/80 backdrop-blur-sm rounded-lg flex items-center justify-center hover:bg-gray-200 active:bg-gray-300 transition-colors"
        >
          {isExpanded ? (
            <ChevronDownIcon className="w-5 h-5 text-gray-700" />
          ) : (
            <ChevronUpIcon className="w-5 h-5 text-gray-700" />
          )}
        </button>
      </div>
    </div>
  );
};

export default PhoneKeypad;